<div class="da-list-wrap">
  <div class="da-content-wrapper">
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="5">
        <d-card style="min-height: calc(100vh - 145px)">
          <d-row class="d-card-header">
            <d-col [dSpan]="24" style="vertical-align: middle">
              <d-card-header>
                <d-card-title>
                  <d-button-group>
                    <d-button (btnClick)="showRole()" [bsStyle]="roleBtnStyle">{{ 'admin.role' | translate }}</d-button>
                    <d-button (btnClick)="showDept()" [bsStyle]="deptBtnStyle">{{ 'admin.dept' | translate }}</d-button>
                  </d-button-group>
                </d-card-title>
              </d-card-header>
            </d-col>
          </d-row>
          <d-card-content>
            <ul class="list-group" *ngIf="tabId === roleTab && authService.hasPrivilege(PRIVILEGE_CODE.roleGrant)">
              <li
                class="list-group-item"
                [ngClass]="{ selected: isRoleSelect(item) }"
                (click)="showPrivilegeByRole(item)"
                *ngFor="let item of roleList"
              >
                <span [ngClass]="{ 'li-disable': item.roleStatus.value != '1' }">{{ item.roleName + '&emsp;' }}</span>
              </li>
            </ul>
            <div *ngIf="tabId === deptTab && authService.hasPrivilege(PRIVILEGE_CODE.deptGrant)" style="padding: 10px 0px 10px 0px">
              <d-search
                style="width: 100%; margin-bottom: 8px"
                [placeholder]="searchTip"
                [isKeyupSearch]="true"
                (searchFn)="searchDeptTree($event)"
              ></d-search>
              <d-operable-tree
                #operableTree
                [tree]="deptList"
                [treeNodeIdKey]="'deptId'"
                [treeNodeTitleKey]="'deptName'"
                [treeNodeChildrenKey]="'children'"
                [selectDisabledKey]="'disableSelect'"
                [draggable]="false"
                [checkable]="false"
                (nodeSelected)="showRoleByDept($event)"
              >
              </d-operable-tree>
            </div>
          </d-card-content>
        </d-card>
      </d-col>
      <d-col [dSpan]="19">
        <d-row [dGutter]="[0, 0]">
          <d-col [dSpan]="24">
            <div class="da-list-container">
              <div class="list-content" id="privilegeContent" style="min-height: calc(100vh - 178px)">
                <d-tabs
                  [type]="'tabs'"
                  (activeTabChange)="activeTabChange($event)"
                  *ngIf="tabId === roleTab && authService.hasPrivilege(PRIVILEGE_CODE.roleGrant)"
                >
                  <d-tab *ngFor="let item of tabItems" [id]="item.id" [tabId]="item.id">
                    <ng-template dTabTitle>
                      {{ item.title }}
                    </ng-template>
                    <ng-template dTabContent>
                      <d-search
                        style="margin-bottom: 8px; width: 100%"
                        [placeholder]="searchTip"
                        [isKeyupSearch]="true"
                        (searchFn)="searchPrivilegeTree($event)"
                      ></d-search>
                      <d-operable-tree
                        *ngIf="checkedItemId != 0"
                        #privilegeTree
                        [tree]="privilegeList"
                        [treeNodeIdKey]="'privilegeId'"
                        [treeNodeTitleKey]="'privilegeName'"
                        [treeNodeChildrenKey]="'children'"
                        [draggable]="false"
                        [checkable]="true"
                        [checkableRelation]="'downward'"
                        (nodeChecked)="privilegeNodeChecked($event)"
                      >
                      </d-operable-tree>
                    </ng-template>
                  </d-tab>
                </d-tabs>
                <d-row
                  [dGutter]="[12, 12]"
                  style="margin-top: -12px"
                  *ngIf="tabId === deptTab && authService.hasPrivilege(PRIVILEGE_CODE.deptGrant)"
                >
                  <d-col [dSpan]="12">
                    <d-tabs [type]="'tabs'">
                      <d-tab title="待授权" id="deptGrant" tabId="deptGrant">
                        <ng-template dTabContent>
                          <d-button
                            bsStyle="common"
                            *ngFor="let item of grantRoleList"
                            style="margin-right: 8px"
                            (btnClick)="grantDeptRole(item)"
                            >{{ item.roleName }}</d-button
                          >
                        </ng-template>
                      </d-tab>
                    </d-tabs>
                  </d-col>
                  <d-col [dSpan]="12">
                    <d-tabs [type]="'tabs'" style="height: 50%">
                      <d-tab title="已授权" id="deptGranted" tabId="deptGranted">
                        <ng-template dTabContent>
                          <d-button
                            bsStyle="primary"
                            *ngFor="let item of grantedRoleList"
                            style="margin-right: 8px"
                            (btnClick)="revokeDeptRole(item)"
                            >{{ item.roleName }}</d-button
                          >
                        </ng-template>
                      </d-tab>
                    </d-tabs>
                  </d-col>
                </d-row>
              </div>
            </div>
          </d-col>
        </d-row>
      </d-col>
    </d-row>
  </div>
</div>
